<template>
	<!-- <view class="goods-box">
		<view class="goods" v-for="(item,index) in list" :key="index" @click="toPage(item)">
				<view class="photo">
					<image class="img" :src="item.img_url" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="detail">
						{{ item.name }}
					</view>
					<view class="price">
						<text class="unti">¥</text>{{ item.sell_price }}
						<text class="org-price"
							v-if="item.old_price && item.old_price > 0"><text>¥{{ item.old_price }}</text></text>
					</view>
				</view>
		</view>
	</view> -->
	<view class="goods-list">
		<view class="goods-item" v-for="(item,index) in list" :key="index" @click="toPage(item)">
		    <view class="goods-image-container">
		        <image class="goods-image" mode="widthFix" :src="item.img_url" alt="商品图片"/>
		    </view>
		    <view class="goods-info">
		        <view class="goods-title">{{ item.name }}</view>
				<view class="flex-row items-center">
					<view class="goods-price">{{item.sell_price}}</view>
					<text class="org-price"
						v-if="item.old_price && item.old_price > 0"><text>¥{{ item.old_price }}</text></text>
				</view>
		       
		    </view>
		</view>
	</view>
</template>

<script>
import throttle from '../uni_modules/uview-ui/libs/function/throttle';

	export default{
		props:{
			list:{
				type:Array,
				default:()=>[]
			},
			goodsType:{
				type:Number,
				default:()=> 0
			},
		},
		data(){
			return{
				
			}
		},
		methods:{
			toPage(item){
				let that = this;
				throttle(function(){
					uni.navigateTo({
						url: '/pages/product/index?goods_id='+item.goods_id + '&goodsType='+that.goodsType
					});
				},1000);
				
				// if(this.$store.state.token){
				// 	uni.navigateTo({
				// 		url: '/pages/product/index?goods_id='+item.goods_id + '&goodsType='+this.goodsType
				// 	});
				// }else{
				// 	this.$handleLogin();
				// }
			}
		}
	}
</script>

<style lang="scss">
.goods-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 5px;
	margin-left: 10rpx;
	margin-right: 10rpx;
	margin-top: 20rpx;
}
	
.goods-item {
	width: calc(50% - 8px);
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 16px;
	box-shadow: 0rpx 8rpx 8rpx 1rpx rgba(0, 0, 0, 0.05);
	transition: transform 0.2s;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
	
.goods-item:active {
	transform: scale(0.98);
}
	
.goods-image-container {
	width: 100%;
	position: relative;
	overflow: hidden;
}
        
.goods-image {
	width: 100%;
	display: block;
	// height: 400rpx;
	max-height: 400rpx;
	aspect-ratio: 1/1; /* 保持1:1比例 */
	object-fit: cover; /* 确保图片完整展示且不变形 */
}

.goods-info {
	padding: 12rpx;
}

.goods-title {
	font-size: 28rpx;
	line-height: 1.4;
	height: 40px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 8px;
}

.goods-price {
	color: #ff4444;
	font-size: 30rpx;
	font-weight: bold;
}

.goods-price::before {
	content: "¥";
	font-size: 14px;
}

.goods-sales {
	color: #999;
	font-size: 12px;
	margin-top: 4px;
}

/* 无数据时的提示 */
.empty-tip {
	text-align: center;
	padding: 40px 0;
	color: #999;
	width: 100%;
}
.org-price{
	font-size: 22rpx;
	color: #999999;
	text-decoration-line: line-through;
}
        
/* 响应式调整 */
@media (max-width: 340px) {
	.goods-item {
		width: calc(50% - 5px);
	}
	
	.goods-title {
		font-size: 26rpx;
	}
	
	.goods-price {
		font-size: 28rpx;
	}
}

</style>